<template>
  <div>
    <!-- 搜索及添加部分 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-input placeholder="请输入任务状态(进行中、已完成、未开始)" v-model="searchStr" class="input-with-select" clearable @clear="handleClear">
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addTaskDialogVisible = true">添加任务</el-button>
      </el-col>
    </el-row>
    <!-- 视图卡片区域 -->
    <el-card>
      <!-- 具体表格数据区域 -->
      <el-table :data="taskInfoData" style="width: 100%" :row-class-name="tableRowClassName" border>
        <el-table-column prop="taskId" label="任务ID" width="80">
        </el-table-column>
        <el-table-column prop="taskName" label="任务名称" width="150">
        </el-table-column>
        <el-table-column prop="taskStartTime" label="任务开始时间">
        </el-table-column>
        <el-table-column prop="taskEndTime" label="任务结束时间">
        </el-table-column>
        <el-table-column prop="taskPublisher" label="发布人" width="120">
        </el-table-column>
        <el-table-column prop="taskHead" label="执行人" width="150">
        </el-table-column>
        <el-table-column prop="taskState" label="任务当前状态" width="120">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.taskState == 0"> 未开始 </el-tag>
            <el-tag type="warning" v-else-if="scope.row.taskState == 1"> 进行中 </el-tag>
            <el-tag type="success" v-else> 已完成 </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="详情"  width="150">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
              <el-button type="warning" icon="el-icon-zoom-in" size="mini" @click="editHandleBtn(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="delTaskBtn(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页功能 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum" :page-sizes="[2, 4, 8, 10]" :page-size="queryInfo.pagesize"
      layout=" sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 添加任务的对话框 -->
    <el-dialog title="添加任务的对话框" :visible.sync="addTaskDialogVisible" width="50%" :before-close="handleClose">
      <el-form :model="addTaskFrom" :rules="addTaskFromRules" ref="addTaskFromRef" label-width="120px" class="demo-ruleForm">
       <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="addTaskFrom.taskName"></el-input>
       </el-form-item>
       <el-form-item label="任务开始时间" prop="taskStartTime">
          <el-col :span="11">
            <el-form-item prop="taskStartTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="addTaskFrom.taskStartTime"  value-format="yyyy-MM-dd" style="width: 100%;">
            </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">--</el-col>
          <el-col :span="11">
            <el-form-item prop="taskStartTime_1">
              <el-time-picker placeholder="选择时间" v-model="addTaskFrom.taskStartTime_1" value-format="hh:mm:ss" style="width: 100%;">
            </el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
       <el-form-item label="任务结束时间" prop="taskEndTime">
        <el-col :span="11">
            <el-form-item prop="taskEndTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="addTaskFrom.taskEndTime"  value-format="yyyy-MM-dd" style="width: 100%;">
            </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">--</el-col>
          <el-col :span="11">
            <el-form-item prop="taskEndTime_1">
              <el-time-picker placeholder="选择时间" v-model="addTaskFrom.taskEndTime_1" value-format="hh:mm:ss" style="width: 100%;">
            </el-time-picker>
            </el-form-item>
          </el-col>
       </el-form-item>
       <el-form-item label="任务发布者" prop="taskPublisher">
          <el-input v-model="addTaskFrom.taskPublisher"></el-input>
       </el-form-item>
       <el-form-item label="任务执行者" prop="taskHead">
          <el-input v-model="addTaskFrom.taskHead"></el-input>
       </el-form-item>
       <el-form-item label="上传附件">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
            <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
            >
            <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
              >
              <i class="el-icon-zoom-in"></i>
            </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>
       </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addTaskDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTaskSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看/编辑 任务详情的对话框 -->
    <el-dialog title="查看任务详情的对话框" :visible.sync="editTaskDialogVisible" width="50%">
      <el-form :model="editTaskFrom" :rules="editTaskFromRules" ref="editTaskFromRef" label-width="120px" class="demo-ruleForm">
       <el-form-item label="任务名称: " class="taskName">
          {{editTaskFrom.taskName}}
       </el-form-item>
       <el-form-item label="任务开始时间-任务结束时间" class="time">
        {{editTaskFrom.taskStartTime}} ~ {{editTaskFrom.taskEndTime}}
       </el-form-item>
       <el-form-item label="发布人: " class="info">
         <span>{{editTaskFrom.taskPublisher}}</span>
        执行人:  <span>{{editTaskFrom.taskHead}}</span>
        任务当前状态:  <span v-if="editTaskFrom.taskState==0">未开始</span>
                      <span v-else-if="editTaskFrom.taskState==1">进行中</span>
                      <span v-else>已完成</span>
       </el-form-item>
       <el-form-item label="上传附件">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
            <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
            >
            <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
              >
              <i class="el-icon-zoom-in"></i>
            </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>
       </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editTaskDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editTaskDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 搜索任务的输入信息
      searchStr: '',
      // 渲染表格的任务数据
      taskInfoData: [],
      // 分页查询的信息
      queryInfo: {
        query: '',
        pagenum: 1, // 当前页数
        pagesize: 5 // 每页条数
      },
      // 总条数
      total: 10,
      // 添加任务的对话框显示与隐藏
      addTaskDialogVisible: false,
      // 编辑任务对话框显示与隐藏
      editTaskDialogVisible: false,
      // 添加任务表单
      addTaskFrom: {
        taskName: '',
        taskStartTime: '',
        taskStartTime_1: '',
        taskEndTime: '',
        taskEndTime_1: '',
        taskPublisher: '',
        taskHead: '',
        taskState: ''
      },
      addTaskFromRules: {
        taskName: [
          { required: true, message: '请输入任务名', trigger: 'blur' }
        ],
        taskStartTime: [
          { required: true, message: '请输入任务开始时间', trigger: 'blur' }
        ],
        taskEndTime: [
          { required: true, message: '请输入任务结束时间', trigger: 'blur' }
        ],
        taskPublisher: [
          { required: true, message: '请输入任务发布者', trigger: 'blur' }
        ],
        taskHead: [
          { required: true, message: '请输入任务执行者', trigger: 'blur' }
        ]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      editTaskFrom: {
        taskName: '',
        taskStartTime: '',
        taskEndTime: '',
        taskPublisher: '',
        taskHead: '',
        taskState: ''
      },
      editTaskFromRules: {
        // taskName: [
        //   { required: true, message: '请输入成员的学号', trigger: 'blur' }
        // ]
      }
    }
  },
  created () {
    this.getTaskInfoData()
  },
  methods: {
    // 根据 输入任务的状态搜索 具体的内容
    handleSearch () {
      this.searchStr = this.searchStr.trim()
      let state = null
      if (this.searchStr === '未开始') {
        state = 0
      } else if (this.searchStr === '进行中') {
        state = 1
      } else {
        state = 2
      }
      this.$http({
        method: 'get',
        url: `/v1/oa/task/getByState/${state}`
      }).then(res => {
        if (res.data.code !== 200) this.$message.error('查询失败')
        this.taskInfoData = res.data.data
      })
    },
    // 清除搜索事件
    handleClear () {
      this.getTaskInfoData()
    },
    // 更改任务栏的样式(颜色)
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.queryInfo.pagesize = val
      this.getPageData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.queryInfo.pagenum = val
      this.getPageData()
    },
    // 获取所有任务信息数据
    getTaskInfoData () {
      this.$http.get('/v1/oa/task/findAll').then((res) => {
        // console.log(res)
        if (res.status !== 200) return this.$message.error('获取表格数据失败')
        res.data.data.forEach(item => {
          item.taskStartTime = item.taskStartTime.slice(0, 10)
          item.taskEndTime = item.taskEndTime.slice(0, 10)
        })
        this.taskInfoData = res.data.data
        // console.log(this.taskInfoData)
      })
    },
    // 分页查询功能
    getPageData () {
      this.$http({
        method: 'get',
        url: '/v1/oa/task/pagedQuery',
        params: {
          page: this.queryInfo.pagenum,
          numberOfPage: this.queryInfo.pagesize
        }
      }).then(res => {
        // console.log(res)
        if (res.data.code !== 200) this.$message.error('哈哈哈这个分页有点问题，你先自己滑滑看')
        this.taskInfoData = res.data.data
      })
      // this.$http.get('/v1/oa/task/numberOfTask').then(res => {
      //   if (res.data.code !== 200) this.$message.error('出错了')
      //   this.total = res.data
      //   // console.log(res)
      // })
    },
    // 按下编辑按钮向输入框里传递数据
    editHandleBtn (row) {
      // console.log(row)
      this.editTaskFrom = row
      this.editTaskDialogVisible = true
    },
    // 添加对话框关闭时的重置事件
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          // 在确认关闭按钮里面进行输入信息重置
          this.$refs.addTaskFromRef.resetFields()
        })
        .catch(_ => {})
    },
    // 删除任务的点击事件
    delTaskBtn (row) {
    // console.log(id.userId)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          method: 'delete',
          url: `/v1/oa/task/delete/${row.taskId}`
        }).then(res => {
        // console.log(res);
          if (res.status !== 200) return this.$message.error('删除失败')
          this.$message.success('删除成功')
          this.getTaskInfoData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加任务的提交时间
    addTaskSubmit () {
      this.addTaskFrom.taskStartTime = this.addTaskFrom.taskStartTime + ' ' + this.addTaskFrom.taskStartTime_1
      this.addTaskFrom.taskEndTime = this.addTaskFrom.taskEndTime + ' ' + this.addTaskFrom.taskEndTime_1
      // console.log(this.addTaskFrom)
      this.$http.post('/v1/oa/task/add', {
        taskEndTime: this.addTaskFrom.taskEndTime,
        taskStartTime: this.addTaskFrom.taskStartTime,
        taskHead: this.addTaskFrom.taskHead,
        taskName: this.addTaskFrom.taskName,
        taskPublisher: this.addTaskFrom.taskPublisher
      }).then(res => {
        // console.log(res)
        if (res.status !== 200) return this.$http.error('添加任务失败')
        this.getTaskInfoData()
      })
      this.addTaskDialogVisible = false
    },
    handleRemove (file) {
      console.log(file)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      console.log(file)
    }
  }
}
</script>
<style lang="less" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-col-2 {
  text-align: center;
}
.el-card{
  margin-top: 20px;
}
.taskName{
  color: cornflowerblue;
  font-weight: bolder;
}
.time{
  width: 100%;
  color: cornflowerblue;
  font-weight: bolder;
  /deep/.el-form-item__label{
    width: 240px !important;
    font-weight: bolder;
  }
}
.info{
  span{
    color: cornflowerblue;
    font-weight: bolder;
    margin-right: 20px;
  }
  font-weight: bolder;
}
</style>
